<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <b class="line"></b>
    <div class="center" style="margin-top:0;">
      <div class="col-main">
        <div class="main-wrap">
          <div class="user-address">
            <!--标题 -->
            <div class="am-cf am-padding">
              <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
            </div>
            <hr>
            <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
              <li v-for="(addr, index) in addressList" :key="index" class="user-addresslist" :class="defaultAddr(addr.status)">
                <span class="new-option-r" v-on:click="setDefault(addr.id)"><i class="am-icon-check-circle"></i>默认地址</span>
                <p class="new-tit new-p-re">
                  <span class="new-txt">{{addr.name}}</span>
                  <span class="new-txt-rd2">{{addr.phone}}</span>
                </p>
                <div class="new-mu_l2a new-p-re">
                  <p class="new-mu_l2cw">
                    <span class="title">地址：</span>
                    <span class="province">{{addr.province}}</span>
                    <span class="city">{{addr.city}}</span>
                    <span class="dist">{{addr.county}}</span>
                    <span class="street">{{addr.details}}</span></p>
                </div>
                <div class="new-addr-btn">
                  <a href="#" v-on:click="visible = !visible,address=addr"><i class="am-icon-edit"></i>编辑</a>
                  <span class="new-addr-bar">|</span>
                  <a href="javascript:;;" v-on:click="delAddress(addr.id)"><i class="am-icon-trash"></i>删除</a>
                </div>
              </li>
              <li class="user-addresslist" style="line-height:120px">
                <a href="javascripty:;;" style="width:10em;height:2em;margin:0 auto;text-align: center;display: block;" v-on:click="visible=true,address={}">
                  新增地址
                </a>
              </li>
            </ul>
            <div class="clear"></div>

            <!--例子-->
            <el-popover placement="right" width="602" trigger="manual" v-model="visible">
              <div>
                <div class="add-dress" style="border: 1px solid;height: auto;overflow: auto;">
                  <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;width:580px">
                    <!-- <p v-if="!address.name" style="width:100%;text-align:center;margin-bottom:20px">新增地址</p>
                    <p v-if="address.name">编辑地址</p> -->
                    <form class="am-form am-form-horizontal">
                      <div class="am-form-group">
                        <label for="user-name" class="am-form-label">收货人</label>
                        <div class="am-form-content">
                          <input type="text" id="user-name" placeholder="收货人" v-model="address.name" style=" width:250px;">
                        </div>
                      </div>

                      <div class="am-form-group">
                        <label for="user-phone" class="am-form-label">手机号码</label>
                        <div class="am-form-content">
                          <input id="user-phone" placeholder="手机号必填" type="email" v-model="address.phone" style=" width:250px;">
                        </div>
                      </div>
                      <!-- <div class="am-form-group">
                        <label for="user-phone" class="am-form-label">QQ号</label>
                        <div class="am-form-content">
                          <input id="user-phone" placeholder="选题" type="email" v-model="address.qq" style=" width:250px;">
                        </div>
                      </div>
                      <div class="am-form-group">
                        <label for="user-phone" class="am-form-label">邮箱号</label>
                        <div class="am-form-content">
                          <input id="user-phone" placeholder="选题" type="email" v-model="address.email" style=" width:250px;">
                        </div>
                      </div> -->
                      <div class="am-form-group">
                        <label class="am-form-label">地址</label>
                        <div class="am-form-content">
                          <v-distpicker :province="address.province" :city="address.city" :area="address.county" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
                        </div>
                      </div>
                      <div class="am-form-group">
                        <label for="user-intro" class="am-form-label">详细地址</label>
                        <div class="am-form-content">
                          <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址" v-model="address.details" style=" width:250px;"></textarea>
                          <small>100字以内写出你的详细地址...</small>
                        </div>
                      </div>
                      <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                          <a class="am-btn am-btn-danger" v-on:click="saveAddress()">保存</a>
                          <a href="javascript:;;" class="am-close am-btn am-btn-danger" data-am-modal-close v-on:click="visible=false">取消</a>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
              <el-button slot="reference"></el-button>
            </el-popover>
          </div>
          <div class="clear"></div>

        </div>
        <!--底部-->
       <foot></foot>
      </div>
      <leftmenu></leftmenu>
      <!--左侧菜单导航栏 begin-->
      <navfull></navfull>
      <!--左侧菜单导航栏 end-->
    </div>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import foot from '@/components/foot.vue'
import leftmenu from '@/components/leftmenu.vue'
import navtable from '@/components/navtable.vue'
import VDistpicker from 'v-distpicker'
export default {
  name: 'uaddress',
  components: {
    myheader,
    navfull,
    foot,
    leftmenu,
    navtable,
    VDistpicker
  },
  data () {
    return {
      user: '',
      visible: false,
      address: "",
      addressList: []
    }
  },
  mounted () {
    this.initAddress()
  },
  methods: {
    onChangeProvince (data) {
      this.address.province = data.value
    },
    onChangeCity (data) {
      this.address.city = data.value
    },
    onChangeArea (data) {
      this.address.county = data.value
    },
    initAddress () {
      this.axios.get("/user/address/addressList")
        .then((response) => {
          var data = response.data.data;
          this.addressList = data;
        })
    },
    defaultAddr (state) {
      if (state == 1)
        return "defaultAddr"
      else
        return ""
    },
    saveAddress () {
      var address = this.address;
      if (address.id == null) {
        this.axios.post("/user/address/address", address)
          .then((response) => {
            var result = response.data;
            if (result.code == 200) {
              this.$layer.msg("新建成功");
              this.initAddress();
              this.visible = false
            } else
              this.$layer.msg(result.msg);
          })
      } else if (address.id != "" && address.id != null) {
        this.axios.put("/user/address/address", address)
          .then((response) => {
            var result = response.data;
            if (result.code == 200) {
              this.$layer.msg("修改成功");
              this.initAddress();
              this.visible = false
            } else
              this.$layer.msg(result.msg);
          })
      }

    },
    setDefault (id) {
      this.axios.get("/user/address/settingDefault", {
        params: {
          id: id
        }
      }).then((response)=> {
        var result = response.data;
        if (result.code == 200) {
          this.$layer.msg("修改默认地址成功");
          this.initAddress();
        } else if (result.msg != "" || result.msg != null) {
          this.$layer.msg(result.msg)
        } else {
          this.$layer.msg("设置默认地址失败");
        }
      })
    },
    delAddress (id) {
      this.axios.delete("/user/address/address", {
        params: {
          id: id
        }
      }).then((response) =>{
        var result = response.data;
        if (result.code == 200) {
          this.$layer.msg("删除成功");
          this.initAddress();
        } else {
          this.$layer.msg(result.msg==""||null?"删除失败":result.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/personal.css";
@import "../../../assets/css/addstyle.css";  
</style>
